vue 2 实现自定义组件一到多个v

您所在的位置:网站首页 vuedraggable 自定义表单 vue 2 实现自定义组件一到多个v

vue 2 实现自定义组件一到多个v

2023-08-30 05:45| 来源: 网络整理| 查看: 265

前言

有时候我们需要对一个组件绑定自定义 v-model,以更方便地实现双向数据,例如自定义表单输入控件。

甚至有时候,我们想要实现绑定多个 “v-model”,也就是多个“双向绑定”,例如带表单输入的模块框,想同时控制模态框的显示状态与表单的输入状态。好在 vue 3 已经实现了多 v-model,那么在 vue 2 上我们可以如下实现。

单个“双向绑定”的实现

使用 model 实现

其实 v-model 只是 value + change 的语法糖,监听输入并触发改变,因此只要实现 “监听” + “触发” 就可以自定义 v-model 啦。

export default { data() { return { value: '' } } } export default { props: { value: String, }, model: { prop: 'value', // 指定 v-model 要绑定的参数叫什么名字,来自于 props 中定义的参数 event: 'change', // 指定要触发的事件名字,将被用于 $emit }, computed: { input: { // 这里的计算属性使用了 getter、setter,可以简化代码 // 可参见链接 https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84-setter get() { return this.value; }


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3